<template>
<!-- 我的钱包 -->
  <div class='myPurse'>
    <el-card class="balance mb20 vip">
      <!-- <span >我的VIP等级：</span> -->
      <span class="balance-monry el-blue">{{ $store.state.user.vip | vipLevel }}</span>
      <!-- <img :src="vipLogo" alt="" class='vip_logo'> -->
      <i :class="vipLogoClass"></i>
      <el-popover
        placement="right"
        title="当前会员等级权益"
        width="350"
        trigger="hover"
        v-if="$store.state.user.vip != 0"
        >
        <div class='vip_Introduction'>
          <ul>
            <li><span>1，可享受撰写案件上报国知局后缴纳专利代理费和官费。</span></li>
            <li><span>2，可享受提交订单后优先分配代理人特权。</span></li>
            <li><span>3，可享受免技术交底文件撰写案件。</span></li>
            <li><span>4，有权参加本系统推出的积分兑换现金的活动，<font class="font_success">{{vipLevelTips.minPoints}}</font>积分起兑</span>。</li>
            <li><span>5，<font class="font_success">1</font>积分可兑换<font class="font_success">{{ vipLevelTips.Points }}</font>元</span>。</li>
          </ul>
        </div>
        <i slot="reference" class='el-icon-info orange ml10'></i>
      </el-popover>
      <!-- <el-button type="primary" @click='buyVip' class='balance-btn' :disabled="$store.state.user.vip >= 4">升级VIP</el-button> -->
    </el-card>
    <el-card class="balance ">
      <span >余额：</span><span class="balance-monry el-blue">{{ balance }}</span>
      <span class="balance-frozenCoin">冻结金额：</span><span class="balance-monry orange">{{ frozenBalance }}</span>
      <el-popover
        placement="right"
        title="冻结金额"
        width="300"
        trigger="hover"
        >
        <span>冻结金额只能支付订单，无法提现到银行卡！</span>
        <i slot="reference" class='el-icon-info orange ml10'></i>
      </el-popover>
      <!-- <el-button type="primary" @click='queryBalance' class='balance-btn'>查询积分</el-button> -->
      <el-button type="primary" @click='withdraw("balance")' class='balance-btn'>提现</el-button>
      <el-popover
        placement="right"
        title="提现说明"
        width="300"
        trigger="hover"
        >
        <span>余额提现到银行卡将收取<font class="font_success">0.6%</font>的手续费。</span>
        <i slot="reference" class='el-icon-info orange ml10'></i>
      </el-popover>

      <el-button type="primary" @click='recharge' class='balance-btn'>充值</el-button>
      <el-popover
        placement="right"
        title="充值说明"
        width="300"
        trigger="hover"
        >
        <span>充值成功后，增加积分，充值金额可在消费时直接抵扣。</span>
        <i slot="reference" class='el-icon-info orange ml10'></i>
      </el-popover>
    </el-card>

    <el-card class="balance mt20">
      <span >总积分：</span><span class="balance-monry el-blue">{{ points }}</span>
      <span class="balance-frozenCoin">冻结积分：</span><span class="balance-monry orange">{{ frozenPoints }}</span>
      <!-- <el-popover
        placement="right"
        title="冻结积分说明"
        width="300"
        trigger="hover"
        >
        <span>冻结积分达到200后系统自动解冻，并且可兑换为钱包余额。</span>
        <i slot="reference" class='el-icon-info orange ml10'></i>
      </el-popover> -->
      <el-button type="primary" @click='withdraw("points")' class='balance-btn'>兑换</el-button>
      <!-- <el-popover
        placement="right"
        title="兑换说明"
        width="300"
        trigger="hover"
        >
        <span>积分兑换到余额将收取<font class="font_success">3%</font>税费。</span>
        <i slot="reference" class='el-icon-info orange ml10'></i>
      </el-popover> -->
    </el-card>

    <el-card class="detail">
      <div slot="header">
        <el-row :gutter="10">
          <el-col :span="3">
            <span class='detail-title fl'>钱包明细</span>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="purseDetailTypes"
              multiple
              collapse-tags
              @change='purseQueryTypes'
              placeholder="选择明细类型查询">
              <el-option
                v-for="item in purseDetailTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              v-model="createdTime"
              unlink-panels
              type="daterange"
              range-separator="至"
              format='yyyy-MM-dd'
              value-format='yyyy-MM-dd'
              start-placeholder="开始日期"
              @change='confirmQuery'
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-button class='ml10' type="primary" @click='showFrozee'>查看冻结金额明细</el-button>
          </el-col>
          <el-col :span="3">
            <el-button class='fr'
              :icon='showPurseDetails ? "el-icon-arrow-down" : "el-icon-arrow-up"'
              type='primary'
              @click="showPurseDetails = !showPurseDetails">{{showPurseDetails ? '收起明细' : '展开明细'}}</el-button>
          </el-col>
        </el-row>

      </div>
      <transition name="draw">
        <el-table
          :data="balanceDetails"
          ref="table"
          stripe
          border
          :show-header='false'
          v-show="showPurseDetails"
          style="width: 100%">
          <el-table-column prop="payMethod" label="支付方式" align="center">
            <template slot-scope="scope">
              {{ scope.row | payMethod }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.type | userPurseType }}
            </template>
          </el-table-column>
          <el-table-column prop="money" align="center" label="金额">
            <template slot-scope="scope">
              <span :class="scope.row.money >= 0 ? 'font_success' : 'font_danger'">{{ scope.row.money > 0 ? `+${scope.row.money}` : scope.row.money}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" align="center" label="时间">
            <template slot-scope='scope'>
              {{ scope.row.created_at}}
            </template>
          </el-table-column>
        </el-table>
      </transition>
    </el-card>

    <el-card class="detail mt20">
      <div slot="header">
        <el-row :gutter="10">
          <el-col :span="3">
            <span class='detail-title fl'>积分明细</span>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="pointsDetailTypes"
              multiple
              collapse-tags
              @change='pointsQueryTypes'
              placeholder="选择明细类型查询">
              <el-option
                v-for="item in pointsDetailTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="9">
            <el-date-picker
              v-model="pointsCreatedTime"
              unlink-panels
              type="daterange"
              range-separator="至"
              format='yyyy-MM-dd'
              value-format='yyyy-MM-dd'
              start-placeholder="开始日期"
              @change='confirmQuery("points")'
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="6">
            <el-button class='fr'
              :icon='showPointsDetails ? "el-icon-arrow-down" : "el-icon-arrow-up"'
              type='primary'
              @click="showPointsDetails = !showPointsDetails">{{showPointsDetails ? '收起明细' : '展开明细'}}</el-button>
          </el-col>
        </el-row>
      </div>
      <transition name="draw">
        <el-table
        v-show="showPointsDetails"
          :data="pointsDetails"
          ref="table"
          stripe
          border
          :show-header='false'
          style="width: 100%">
          <el-table-column prop="type" label="类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.type | userPursePointsType }}
            </template>
          </el-table-column>
          <el-table-column prop="points" align="center" label="金额">
            <template slot-scope="scope">
              <span :class="scope.row.points >= 0 ? 'font_success' : 'font_danger'">{{ scope.row.points > 0 ? `+${scope.row.points}` : scope.row.points}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" align="center" label="时间">
            <template slot-scope='scope'>
              {{ scope.row.created_at}}
            </template>
          </el-table-column>
        </el-table>
      </transition>
    </el-card>
    <withdrawDialog ref="withdrawDialog" @refresh='refresh'></withdrawDialog>
    <rechargeDialog ref="rechargeDialog" @refresh='refresh'></rechargeDialog>
    <buyVipDialog ref="buyVipDialog" @refresh='refresh'></buyVipDialog>
    <frozeeDetail ref="frozeeDetail"/>
  </div>
</template>

<script>
import withdrawDialog from './components/withdrawDialog'
import rechargeDialog from './components/recharge-dialog'
import buyVipDialog from './components/buyVIp-diaglog'
import frozeeDetail from './components/frozeeDetail'
import moment from 'moment'
import QRCode from "qrcode"; // 引入qrcode
import aes from '~/util/aes.js'
import { pointsTypeOptions, purseTypeOptions  } from './config'
export default {
  data () {
    return {
      purseDetailTypeOptions: purseTypeOptions,
      purseDetailTypes:'',
      pointsDetailTypeOptions: pointsTypeOptions,
      pointsDetailTypes:'',
      vipLogo: '',
      vipLevelTips: {
        Points: '',
        minPoints: ''
      },
      balanceDetails: [],
      pointsDetails: [],
      createdTime: [
        
      ],
      pointsCreatedTime:[],
      paramsByPurse: {
        type:'0,1,3,5,6,7,8',
      },
      paramsByPoints: {},
      points: '', // 积分
      frozenPoints: '', // 冻结积分
      balance: null, // 余额
      frozenBalance: null, // 冻结余额
      qrcodeURL: `http://m.mingyukehui.com/register?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}`,
      pcQrcodeURL: `http://mingyukehui.com/register?channel_pid=${this.$store.state.user.cryptId}&code=${this.$store.state.user.invitation_code}`,
      showPurseDetails: true,
      showPointsDetails: false,
      vipLogoClass: ''
    }
  },
  components: {
    withdrawDialog,
    rechargeDialog,
    buyVipDialog,
    frozeeDetail,

  },
  mounted () {
    // 创建二维码
    this.createQrCode(
      "qrcode",
      this.qrcodeURL
    );
  },
  watch: {
    '$store.state.user.vip': {
      handler: function (val) {
        if (val == 0) {
          this.vipLogoClass = 'icon iconfont icon-VIP'
        } else if (val == 1) {
          this.vipLogoClass = 'icon iconfont icon-vip1 font_red'
          this.vipLevelTips.Points = 1
          // this.vipLevelTips.minPoints = 200
        } else if (val == 2) {
          this.vipLogoClass = 'icon iconfont icon-vip2 font_red'
          this.vipLevelTips.Points = 3
          // this.vipLevelTips.minPoints = 500
        } else if (val == 3) {
          this.vipLevelTips.Points = 5
          this.vipLogoClass = 'icon iconfont icon-vip3 font_red'
          // this.vipLevelTips.minPoints = 1000
        } else if (val == 4) {
          this.vipLogoClass = 'icon iconfont icon-vip4 font_red'
          this.vipLevelTips.Points = 10
          // this.vipLevelTips.minPoints = 2000
        }
      },
      immediate: true,
      // deep: true
    },
    createdTime: {
      handler: function (val) {
        if (val && val.length > 0) {
          this.paramsByPurse.start_time = val[0]
          this.paramsByPurse.end_time = val[1]
        } 
      },
      deep: true
    },
    pointsCreatedTime: {
      handler: function (val) {
        if (val && val.length > 0) {
          this.paramsByPoints.start_time = val[0]
          this.paramsByPoints.end_time = val[1]
        } 
      },
      deep: true
    },
  },
  created () {
    // 默认查询当月明细
    let nowTiem = {
      start_time:  `${moment().format("YYYY-MM")}-01`,
      end_time: `${moment().format("YYYY-MM")}-31`,
    }
    this.createdTime[0] = nowTiem.start_time
    this.createdTime[1] = nowTiem.end_time
    this.paramsByPurse.start_time = nowTiem.start_time
    this.paramsByPurse.end_time = nowTiem.end_time
    this.paramsByPoints.start_time = nowTiem.start_time
    this.paramsByPoints.end_time = nowTiem.end_time
    this.getDetailsData(nowTiem)
    this.getPointsDetails(nowTiem)
    this.queryBalance()
    this.queryIntegral()

    this.getWithdrawalAmount()
  },

  methods: {

    // 获取vip配置
    getWithdrawalAmount () {
      this.$axios.get('api/activity/consumer_setting').then(res => {
        if (res.data.code == 200) {
          if (this.$store.state.user.vip != 0) {
            this.vipLevelTips.minPoints = res.data.data[`vip${this.$store.state.user.vip}`].min
          }
        }
      }).catch( error => {
        this.$message.error(error)
      })
    },

    // 查看冻结金额明细
    showFrozee () {
      this.$refs['frozeeDetail'].show(this.createdTime)
    },
    purseQueryTypes(value) {
      if (value) {
        this.paramsByPurse.type = value.join(',')
      } else {
        this.paramsByPurse.type = '0,1,3,5,6,7,8'
      }
      this.getPointsDetails(this.paramsByPurse)
    },
    pointsQueryTypes(value) {
      this.paramsByPoints.type = value.join(',')
      this.getDetailsData(this.paramsByPoints)
    },
    // 购买vip
    buyVip () {
      this.$refs['buyVipDialog'].show()
    },
    // 充值
    recharge() {
      this.$refs['rechargeDialog'].show()
    },
    refresh() {
      this.getDetailsData()
      this.getPointsDetails()
      this.queryBalance()
      this.queryIntegral()
    },
    // 获取积分明细数据
    getDetailsData (pParams) {
      let params = {

      }
      if (pParams) {
        params = pParams
      }
      params.is_all = 1
      this.$axios.get('api/drawing/wallet/consumer_points_detail', {
        params: params
      }).then(res => {
        this.pointsDetails = res.data.data
      })
    },
    // 获取余额明细数据
    getPointsDetails (pParams) {
      let params = {}
      if (pParams) {
        params = {...params, ...pParams, ...this.paramsByPurse}
      }
      params.is_all = 1
      this.$axios.get('api/drawing/wallet/consumer_detail', {
        params: params
      }).then(res => {
        this.balanceDetails = res.data.data
      })
    },
    // 获取余额
    queryBalance () {
      this.$axios.get('api/drawing/consumer_wallet').then(res => {
        if (res.data.code == 200) {
          this.balance = res.data.data.coin
          this.frozenBalance = res.data.data.frozenCoin
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取积分
    queryIntegral () {
      this.$axios.get('api/drawing/consumer').then(res => {
        if (res.data.code == 200) {
          this.points = res.data.data.points
          this.frozenPoints = res.data.data.frozenPoints
        } else if (res.data.code == 400) {
          this.$message.error(res.data.message)
        }
      })
    },

     // 发起提现申请
    withdraw(type) {
      let data = {}
      if (type == 'balance') {
        this.queryBalance()
        data = {
          points: this.balance,
          frozenPoints: this.frozenBalance,
          type: 'balance'
        }
      } else {
        this.queryIntegral()
        data = {
          points: this.points,
          frozenPoints: this.frozenPoints,
          type: 'points'
        }
      }
      this.$refs.withdrawDialog.show(data)
    },

    // 时间查询
    confirmQuery (type) {
      if (type == 'points') {
        if (this.pointsCreatedTime) {
          this.paramsByPoints.start_time = this.pointsCreatedTime[0]
          this.paramsByPoints.end_time = this.pointsCreatedTime[1]
          this.getDetailsData(this.paramsByPoints)
        } else {
          this.getDetailsData()
        }
      } else {
        if (this.createdTime) {
          this.paramsByPurse.start_time = this.createdTime[0]
          this.paramsByPurse.end_time = this.createdTime[1]
          this.getPointsDetails(this.paramsByPurse)
        } else {
          this.getPointsDetails()
        }
      }

    },

    createQrCode(refName, payUrl) {
      QRCode.toDataURL(this.$refs[refName], payUrl, {
        width: 120,
        height: 120
      })
      .then(url => {})
      .catch(err => {
        // this.openMessage(0, '生成二维码失败')
      });
    },
    // 复制成功
    onCopy(e){
      this.$message({
        message:'复制成功！',
        type:'success'
      })
    },
    // 复制失败
    onError(e){
      this.$message({
        message:'复制失败！',
        type:'error'
      })
    },
  }
}
</script>

<style lang='less' type='text/css'>
  .myPurse{
    height: auto;
    background: #f5f5f5;
    padding: 20px;
    .balance {
      span {
        font-size: 20px;
      }
      .balance-frozenCoin {
        margin-left: 30px;
      }
      .balance-btn {
        margin-left: 30px;
        span {
          font-size: 14px;
        }
      }
    }
    .detail {
      margin-top: 20px;
      // min-height: 200px;

      .el-card__body {
        overflow-y: auto;
        max-height:250px;
      }
      .detail-title {
        font-size: 18px;
      }
      .el-date-editor {
        width: 100%;
        max-width: 350px;
      }
      .el-select {
        width: 100%;
        max-width: 250px;
      }
      .detail-item {
        font-size:16px;
        margin-bottom: 10px;
        .item-money {
          // float: right;
          margin-left: 200px;
        }
        .item_type {
          min-width: 200px;
          display: inline-block;
        }
        .item-tiem {
          color: #909399;
          margin-top: 5px;
          // margin-left: 200px;
          float: right;
          // display: inline-block;
        }
      }

      .Nodata {
        height: 50px;
        position: relative;
        .Nodata-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          font-size: 14px;
        }
      }
    }
    .qrcode {
      margin-top: 20px;
      position: relative;

      &-title {
        font-size: 18px;
      }
      &-btn {
        margin-left: 30px;
      }
      // .url-copy {
      //   position: absolute;
      //   top: 50%;
      //   left: 150px;
      //   transform: translate(0, -50%);
      // }
    }
    .vip {

      .vip_logo {
        width: 22px;
      }
      // vertical-align: middle;
    }
    .el-table {
      height: 100%;
      // min-height: 400px;
      // height: 1000px;
    }
  }
  .vip_Introduction {
    margin-top: 10px;
    ul {
      padding-left: 10px;
      li {
        list-style: none;
        span {
          font-size: 14px;
        }
      }
    }
  }
  .draw-enter-active, .draw-leave-active {
    transition: all 0.5s ease-out;
  }
  .draw-enter, .draw-leave-to {
    height: 0 !important;
  }
</style>
